<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-11-24 11:27:42
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-11-27 16:17:04
 * @FilePath: \v9\src\views\kitchen\components\MoveBox.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content">
    <!-- 返回 -->
    <div class="back" @click="back">
      <svg-icon icon-class="back"></svg-icon>
    </div>

    <div class="box flex-row-start">
      <img class="img" :src="content.icon" alt="" />
      <div class="box-title flex-column-start">
        <span class="box-title-top">{{ content.name }}</span>
        <span class="box-title-bottom">{{ content.desc }}</span>
      </div>
    </div>
    <div class="link">
      <a :href="wapUrl" target="_blank">
        {{ wapUrl }}
      </a>
      <i class="el-icon-document-copy" @click="handleCopyMore(wapUrl)"></i>
    </div>
    <div class="card">
      <div class="box">
        <div class="img-box">
          <div class="card-box flex-column-around">
            <span class="card-box-title">小程序跳转</span>
            <img class="card-box-img" src="../image/xiaochengxu.png" alt="" />
          </div>
        </div>
        <div class="con-box">
          <div>
            <div class="card-box flex-column-around">
              <span class="card-box-title">小程序跳转</span>
              <img class="card-box-img" src="../image/xiaochengxu.png" alt="" />
              <div class="card-box-box" @click="navTo">立即跳转</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      window,
    };
  },
  computed: {
    wapUrl() {
      return `http://${window.location.host}${this.content.wap_url}`;
    },
  },
  methods: {
    navTo() {
      window.open(`http://${window.location.host}${this.content.wap_url}`);
    },

    back() {
      this.$emit("closeMove", false);
    },
    // 更多入口复制
    handleCopyMore(url) {
      if (!url) {
        return;
      }
      this.copyToClipboard(url); // 需要复制的文本内容
      this.$message.success(`${this.content.name}地址复制成功！`);
    },
    // 点击复制到剪贴板函数
    copyToClipboard(content) {
      if (window.clipboardData) {
        window.clipboardData.setData("text", content);
      } else {
        (function (content) {
          document.oncopy = function (e) {
            e.clipboardData.setData("text", content);
            e.preventDefault();
            document.oncopy = null;
          };
        })(content);
        document.execCommand("Copy");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 17px 42px;
  .back {
    width: 100%;
    height: 40px;
    line-height: 40px;
    &:hover {
      cursor: pointer;
    }
  }
  .box {
    align-items: center;
    margin-top: 20px;
    .img {
      width: 80px;
      height: 80px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-title {
      margin-left: 20px;
      &-top {
        font-size: 36px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      &-bottom {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-top: 20px;
      }
    }
  }
  .link {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-direction: row;
    a {
      padding: 0 10px;
      color: #19b098;
      text-decoration: underline;
      min-width: 150px;
    }
    i {
      font-size: 16px;
      cursor: pointer;
      &:hover {
        color: #19b098;
      }
    }
  }
  .card {
    margin-top: 30px;
    position: relative;
    /* 使该盒子具有3D属性 */
    transform-style: preserve-3d;
    /* 使具有旋转效果 */
    perspective: 1000px;

    .box {
      /* 绝对定位 */
      position: absolute;
      top: 0;
      left: 100px;
      transform-style: preserve-3d;
      /* 设置过渡 */
      transition: 1s ease;
      .img-box {
        position: absolute;
        top: 0;
        left: 0;
        /* 隐藏旋转div元素的背面 */
        backface-visibility: hidden;
        z-index: 1;
        .card-box {
          width: 250px;
          height: 340px;
          border: 1px solid #999999;
          background: linear-gradient(-45deg, #fafafa 0%, #ffffff 100%);
          border-radius: 10px;
          padding: 20px 0;
          align-items: center;
          &-title {
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
          &-img {
            width: 120px;
            height: 120px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .con-box {
        /* 隐藏旋转div元素的背面 */
        backface-visibility: hidden;
        transform-style: preserve-3d;
        /* 默认沿Y轴旋转180度 */
        transform: rotateY(180deg);
        div {
          transform-style: preserve-3d;
          .card-box {
            width: 250px;
            height: 340px;
            border: 1px solid #999999;
            background: linear-gradient(-45deg, #fafafa 0%, #ffffff 100%);
            border-radius: 10px;
            padding: 20px 0;
            align-items: center;
            &-title {
              font-size: 20px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #333333;
            }
            &-img {
              width: 120px;
              height: 120px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            &-box {
              width: 140px;
              height: 43px;
              background: #009944;
              border-radius: 22px;
              font-size: 20px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #fefefe;
              text-align: center;
              line-height: 43px;
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    &:hover .box {
      /* 鼠标移入，盒子旋转180度 */
      transform: rotateY(180deg);
    }
  }
}
</style>